import React from 'react'
import {List, Modal} from "antd-mobile";
import LocalStorageService from "../../../../utils/LocalStorageService";
import UploadImage from "../../../../utils/image";

class UploadAvatarModal extends React.Component {

    // constructor(props) {
    //     super(props)
    // }

    cameraUpload = (e) => {
        // this.setState({
        //     avatarUpload: false,
        // })
        // let _this = this
        const fs = e.target.files
        // const uid = LocalStorageService.get('userid')
        const img = fs[0]
        let MAX_SIZE = 100 * 1024
        let imgIns = new UploadImage(img)
        let params = {
            file: img,
            targetSize:MAX_SIZE,
            quality: 1,
            width: 600,
            height: 600,
            fileName: img.name,
        }
        imgIns.zipImage(params)
            .then((file) => {
                this.props.onFileChange(file)
                // let fm = new FormData()
                // fm.append('avatar', file)
                // fm.append('uid', uid)
                // _this.props.doChangeAvatar(fm)
            })
    }

    render() {

        const cameraInput = <div style={{position: 'relative', width: '100%', display: 'block', textAlign: 'center',}} >
            拍照
            <input
                value=''
                type="file"
                capture="camera"
                style={{position: 'absolute', left: 0, top: 0, opacity: 0, height: '100%',}}
                onChange={(e) => this.cameraUpload(e)}
            />
        </div>

        const fileInput = <div style={{position: 'relative', width: '100%', display: 'block', textAlign: 'center',}} >
            相册
            <input
                value=''
                type="file"
                style={{position: 'absolute', left: 0, top: 0, opacity: 0, height: '100%',}}
                onChange={(e) => this.cameraUpload(e)}
            />
        </div>

        const modal = <Modal
            popup
            animationType="slide-up"
            visible={this.props.visible}
            onClose={() => this.props.onClose()}
        >
            <List>
                <List.Item>
                    {cameraInput}
                </List.Item>
                <List.Item>
                    {fileInput}
                </List.Item>
                <List.Item
                    onClick={() => {
                        this.setState({
                            avatarUpload: false,
                        })
                    }}
                >
                    <div style={{position: 'relative', width: '100%', display: 'block', textAlign: 'center',}} >
                        取消
                    </div>

                </List.Item>
            </List>

        </Modal>

        return modal

    }
}

export default UploadAvatarModal